<template>
  <div class="content_box">
    <div class="top_bj">
      <img class="img1" mode="widthFix" src="/static/images/my_icon1.png" alt="">
      <img :style="{top:statusBarHeight+20+'px'}" class="img2" mode="widthFix" src="/static/images/my_icon2.png" alt="">
    </div>
    <div class="tx_box" :style="{paddingTop:navBarHeight+'px'}">
      <p class="img">
        <img src="/static/images/tx.png" alt="">
      </p>
      <p class="text" v-if="!userPhone">应许之地</p>
      <p class="text" v-else>{{userPhone}}</p>
    </div>
    <div class="msg_box">
      <div class="msg">
        <div class="left">
          <p class="text">我的余额/充值(元)</p>
          <p class="price">{{available}}</p>
        </div>
        <p class="anniu" @click="toJifen(1)">储值中心</p>
      </div>
      <div class="tab">
        <div class="box" @click="toJifen(1)">
          <img src="/static/images/my_icon3.png" alt="">
          <p>储值中心</p>
          <p class="label">特惠</p>
        </div>
        <div class="box" @click="toCoupon">
          <img src="/static/images/my_icon4.png" alt="">
          <p>优惠券</p>
        </div>
        <div class="box" @click="toJifen(0)">
          <img src="/static/images/my_icon5.png" alt="">
          <p>团购兑换</p>
        </div>
      </div>

      <div class="list">
        <div class="box" @click="toNovice">
          <img src="/static/images/my_icon6.png" alt="">
          <p class="text">新手指南</p>
        </div>
        <div class="box" @click="wifiShow = true">
          <div class="left">
            <img src="/static/images/my_icon7.png" alt="">
            <p class="text">wifi链接</p>
          </div>
        </div>
        <div class="box" @click="toFeedBack">
          <div class="left">
            <img src="/static/images/my_icon8.png" alt="">
            <p class="text">意见反馈</p>
          </div>
        </div>
        <div class="box" @click="kefuPop">
          <div class="left">
            <img src="/static/images/my_icon9.png" alt="">
            <p class="text">联系客服</p>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系客服 -->
    <div class="kefu_pop">
      <van-popup position="bottom" :show="kefuShow" @close="closeKefu">
        <div class="box">
          <p class="title">联系客服</p>
          <div class="nr">
            <button type="primary" open-type="contact">
              <p class="img">
                <img src="/static/images/kefu.png" alt="">
              </p>
              <p class="text">在线客服</p>
            </button>
            <button @click="callPhone">
              <p class="img">
                <img src="/static/images/tell.png" alt="">
              </p>
              <p class="text">电话客服</p>
            </button>
          </div>
          <p class="quxiao" @click="closeKefu">取消</p>
        </div>
      </van-popup>
    </div>

    <!-- wifi -->
    <div class="wifi_pop">
      <van-popup :show="wifiShow">
        <div class="box">
          <img class="bj" src="/static/images/wifi_pop.png" alt="">
          <div class="nr">
            <p class="title">共享WIFI</p>
            <p class="text">应许之地祝您娱乐愉快~</p>
            <div class="zhanghao">
              <p class="text1">WIFI 账号：{{storeImg.wifiName}}</p>
              <p class="text1">WIFI 密码：{{storeImg.wifiPassword}}</p>
            </div>
            <p class="anniu" @click="connectWifi">一键链接</p>
          </div>
        </div>
        <p class="close" @click="wifiShow = false"><van-icon name="cross" /></p>
      </van-popup>
    </div>
    <p v-if="roles.length" class="admin" @click="toStoreAdmin">店铺管理</p>
    <!-- <ui-tab-bar :tabBarIndex="2"></ui-tab-bar> -->
  </div>
</template>

<script>
import { 
  getUserPhone,
  getRoles
} from "@/utils/auth";
import { 
  getStoreDetails,
  getMyWalletAmount
} from "@/api/index";

export default {
  data() {
    return {
      statusBarHeight: "", // 状态栏高度
      titleBarHeight: "", // 标题栏高度
      navBarHeight: "", // 导航栏总高度
      kefuShow:false,
      wifiShow:false,
      available:'0.00',
      userPhone:'',
      storeImg:{},
      roles:getRoles(),
    };
  },
  methods: {

    // 一键链接wifi
    connectWifi() {
      var that = this;
      //检测手机型号
      wx.getSystemInfo({
        success:(res)=>{
          var system = '';
          if (res.platform == 'android') system = parseInt(res.system.substr(8));
          if (res.platform == 'ios') system = parseInt(res.system.substr(4));
          if (res.platform == 'android' && system < 6) {
              this.$toast('手机版本不支持~')
              return;
          }
          if (res.platform == 'ios' && system < 11.2) {
              this.$toast('手机版本不支持~')
              return;
          }
          //2.初始化 Wi-Fi 模块
          console.log("支持")
          that.startWifi();
        }
      });
    },

    //初始化 Wi-Fi 模块
    startWifi() {
      let that = this
      wx.startWifi({
        success: () =>{
          //请求成功连接Wifi
          console.log('成功')
          wx.showLoading({title: '连接中...'})
          wx.connectWifi({
            SSID: this.storeImg.wifiName,
            password: this.storeImg.wifiPassword,
            success: (res) =>{
              console.log(res)
              wx.hideLoading()
              setTimeout(() => {
                that.$toast('连接成功~')
              }, 500);
            },
            fail: (err) =>{
              console.log(err)
              setTimeout(() => {
                that.$toast('连接失败~')
              }, 500);
              wx.hideLoading()
            }
          });
        },
        fail: (res) =>{
          that.$toast('连接失败~')
        }
      });
    },

    // 客服电话
    callPhone() {
      wx.makePhoneCall({
        phoneNumber: this.storeImg.mobile //仅为示例，并非真实的电话号码
      })
    },

    // 跳转新手指南
    toNovice(){
      wx.navigateTo({
        url: `/pages/novice_guide/main`,
      });
    },

    // 跳转店铺管理
    toStoreAdmin(){
      if(!getUserPhone()){
        wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      console.log(this.roles)
      if(!this.roles.length){
        wx.showModal({
          title: '温馨提示',
          confirmText: "知道了",
          showCancel: false,
          content: '暂无权限',
        })
      }else{
        wx.navigateTo({
          url: `/pages/staffPages/roomAdmin/main`,
        });
      }
    },

    // 获取店铺信息
    getStoreMsg(){
      getStoreDetails({storeId:'766639530495164416'}).then(res=>{
        if(res.statusCode == '00000'){
          this.storeImg = res.data
        }
      })
    },

    // 获取钱包金额
    getMoney(){
      getMyWalletAmount().then(res=>{
        if(res.statusCode == '00000'){
          this.available = res.data.available
        }
      })
    },

    // 客服点击
    kefuPop(){
      this.kefuShow = true
      wx.hideTabBar()
    },

    // 关闭弹窗  
    closeKefu(){
      this.kefuShow = false
      setTimeout(() => {
        wx.showTabBar()
      }, 300);
    },
    
    // 跳转意见反馈
    toFeedBack(){
      if(!getUserPhone()){
       wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/feedback/main`,
      });
    },

    // 跳转优惠券
    toCoupon(){
      if(!getUserPhone()){
       wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/coupon/main`,
      });
    },

    // 跳转团购-充值
    toJifen(num){
      if(!getUserPhone()){
       wx.navigateTo({
          url: '/pages/authorization/main',
        });
        return
      }
      wx.navigateTo({
        url: `/pages/recharge/main?active=${num}`,
      });
    },
    
  },

  onShareAppMessage() {

  },
  onShow(){
    if(getUserPhone()){
      this.userPhone = getUserPhone().substr(0, 3) + '****' + getUserPhone().substr(7)
      this.getMoney()
    }

    if(getRoles().length){
      this.roles = getRoles()
    }
  },
  onLoad() {
    this.getStoreMsg()
  },
  onTabItemTap(){
   wx.vibrateShort({type:'heavy'});
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(`system:`, system);
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
      },
    });
  },
};
</script>

<style lang="scss" scoped>
.content_box {
  min-height: 100vh;
  background: #F5F5F5;
  .top_bj{
    position: fixed;
    top:0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .img1{
      width: 300rpx;
    }
    .img2{
      flex: 1;
      position: relative;
      z-index: -1;
    }
  }
  .tx_box{
    position: relative;
    z-index: 10;
    margin-left:32rpx;
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size:34rpx;
    color:#222;
    .img{
      width: 100rpx;
      height: 100rpx;
      border-radius: 50%;
      margin-right:24rpx;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  .msg_box{
    margin-top:88rpx;
    position: relative;
    z-index: 20;
    .msg{
      margin:0 32rpx;
      height: 154rpx;
      border-top-left-radius: 30rpx;
      border-top-right-radius: 30rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;
      overflow: hidden;
      background: linear-gradient(to right,#CBD2A3, #9CB571);
      .anniu{
        position: relative;
        z-index: 10;
        margin-right:24rpx;
        width: 160rpx;
        height: 70rpx;
        border-radius: 50rpx;
        background: #788933;
        color:#fff;
        font-weight: 500;
        line-height: 70rpx;
        text-align: center;
        font-size:28rpx;
      }
      img{
        position: absolute;
        top:0;
        width: 100%;
      }
      .text{
        color:#4B5817;
        font-weight: bold;
        font-size:24rpx;
        margin-top:26rpx;
        margin-bottom:10rpx;
        position: relative;
        z-index: 10;
        margin-left:34rpx;
      }
      .price{
        color:#4B5817;
        font-size:54rpx;
        font-family: 'Neutra Text';
        position: relative;
        z-index: 10;
        margin-left:34rpx;
      }
    }
    .tab{
      background: #fff;
      display: flex;
      height: 200rpx;
      align-items: center;
      justify-content: space-around;
      text-align: center;
      font-size:26rpx;
      color:#666;
      font-weight: bold;
      img{
        width: 72rpx;
        height: 72rpx;
        margin-bottom:12rpx;
      }
      .box{
        position: relative;
      }
      .label{
        width: 52rpx;
        height: 34rpx;
        background: #FF514D;
        display: flex;
        align-items: center;
        justify-content: center;
        color:#fff;
        font-size:18rpx;
        border-bottom-right-radius: 15rpx;
        border-top-left-radius: 15rpx;
        position: absolute;
        top:0;
        right:-20rpx;
      }
    }
  }
  .list{
    margin-top:32rpx;
    background: #fff;
    padding:0 32rpx;
    height: 204rpx;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    z-index: 20;
    .box{
      text-align: center;
      img{
        width: 80rpx;
        height: 80rpx;
      }
      .text{
        color:#666;
        font-size:26rpx;
        font-weight: 500;
        margin-top:8rpx;
      }
    }
  }
  .kefu_pop{
    /deep/ .van-popup {
      border-top-right-radius: 20rpx !important;
      border-top-left-radius: 20rpx !important;
    }
    .title{
      height: 120rpx;
      line-height: 120rpx;
      font-size:34rpx;
      color:#505050;
      font-weight: 600;
      text-align: center;
    }
    .nr{
      display: flex;
      align-items: center;
      justify-content: space-around;
      padding-bottom:48rpx;
    }
    button::after {
      border: none;
    }
    button{
      background: none;
      color:#222;
      margin:0;
      .img{
        width: 100rpx;
        height: 100rpx;
        background: #F9F9FB;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          width: 52rpx;
          height: 52rpx;
        }
      }
      .text{
        color:#6C6C6C;
        font-size:24rpx;
        text-align: center;
      }
    }
    .quxiao{
      margin:0 30rpx;
      height: 96rpx;
      line-height: 96rpx;
      background: #222;
      border-radius: 4rpx;
      margin-bottom:24rpx;
      text-align: center;
      font-size:30rpx;
      color:#fff;
    }
  }
  .wifi_pop{
    /deep/ .van-popup {
      background: none;
      width: 84%;
      padding-bottom:100rpx;
    }
    .box{
      height: 632rpx;
      position: relative;
      .bj{
        width: 100%;
        height: 100%;
        top:0;
        left: 0;
        position: absolute;
      }
      .nr{
        position: relative;
        z-index: 10;
        width: 90%;
        margin:0 auto;
        .title{
          padding-top:140rpx;
          color:#000;
          font-size:40rpx;
          font-weight: bold;
          margin-bottom:12rpx;
        }
        .text{
          font-size:26rpx;
          color:#000;
        }
        .zhanghao{
          padding:48rpx;
          background: #fff;
          margin-top:44rpx;
          color:#222222;
          font-size:28rpx;
          p{
            &:nth-of-type(1){
              margin-bottom:24rpx;
            }
          }
        }
        .anniu{
          width: 100%;
          height: 80rpx;
          background: #222222;
          text-align: center;
          line-height: 80rpx;
          color:#fff;
          font-size:28rpx;
          margin-top:24rpx;
          border-radius: 4rpx;
        }
      }
    }
    .close{
      width: 64rpx;
      height: 64rpx;
      border:4rpx solid #fff;
      border-radius: 50%;
      margin:32rpx auto 0 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size:46rpx;
      color:#fff;
    }
  }
  .admin{
    width: 160rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
    border-radius: 8rpx;
    border:1px solid #aaa;
    font-size:28rpx;
    color:#666;
    margin:100rpx auto 0 auto;
  }
}
</style>